var renderer;
function initThree() {
  width = document.getElementById("canvas-frame").clientWidth;
  height = document.getElementById("canvas-frame").clientHeight;
  renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(width, height);
  document.getElementById("canvas-frame").appendChild(renderer.domElement);
  renderer.setClearColor(0xffffff, 1.0);
}

var camera;
var cameraParam;
function initCamera() {
  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.x = cameraParam.x;
  camera.position.y = cameraParam.y;
  camera.position.z = cameraParam.z;
  camera.up.x = 0;
  camera.up.y = 1;
  camera.up.z = 0;
  camera.lookAt({
    x: 0,
    y: 0,
    z: 0,
  });
}

var scene;
function initScene() {
  scene = new THREE.Scene();
}

var light;
var lightParam;
function initLight() {
  light = new THREE.PointLight(0xffff00, 1, 1000, lightParam.decay);
  light.position.set(lightParam.x, lightParam.y, lightParam.z);
  scene.add(light);
}

var cube;
var texture;
function initObject() {
  var geometry = new THREE.Geometry(200, 100, 50, 4, 4);
  // var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
  var material = new THREE.MeshBasicMaterial({map: texture});
  var mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, 0);
  scene.add(mesh);

  var geometry2 = new THREE.CubeGeometry(200, 100, 50, 4, 4);
  var material2 = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 0xff0000,
  });
  var mesh2 = new THREE.Mesh(geometry2, material2);
  mesh2.position.set(-300, 0, 0);
  scene.add(mesh2);

  var geometry3 = new THREE.CubeGeometry(200, 100, 50, 4, 4);
  var material3 = new THREE.MeshLambertMaterial({color: 0xff0000});
  var mesh3 = new THREE.Mesh(geometry3, material3);
  mesh3.position.set(0, -150, 0);
  scene.add(mesh3);

  var mesh4 = new THREE.Mesh(geometry3, material3);
  mesh4.position.set(0, 150, 0);
  scene.add(mesh4);

  var mesh5 = new THREE.Mesh(geometry3, material3);
  mesh5.position.set(300, 0, 0);
  scene.add(mesh5);

  var mesh6 = new THREE.Mesh(geometry3, material3);
  mesh6.position.set(0, 0, -100);
  scene.add(mesh6);
}

function initTexture() {
  texture = THREE.ImageUtils.loadTexture("textures/b.jpg", null, function (e) {
    console.log("e", e);
  });
}

var gui;
var textureParam;
function createUI() {
  var textureObj = function () {
    this.repeat = 1;
    this.wrap = 1;
    this.offsetX = 0;
    this.offsetY = 0;
  };

  var lightObj = function () {
    this.x = 0;
    this.y = 0;
    this.z = 0;
    this.decay = 1;
  };

  var cameraObj = function () {
    this.x = 0;
    this.y = 600;
    this.z = 500;
  };

  var gui = new DAT.GUI();
  cameraParam = new cameraObj();
  gui.add(cameraParam, "x", -2000, 2000).name("相机X的位置");
  gui.add(cameraParam, "y", -2000, 2000).name("相机Y的位置");
  gui.add(cameraParam, "z", -2000, 2000).name("相机Z的位置");

  lightParam = new lightObj();
  gui.add(lightParam, "x", -2000, 2000).name("点光源X的位置");
  gui.add(lightParam, "y", -2000, 2000).name("点光源Y的位置");
  gui.add(lightParam, "z", -2000, 2000).name("点光源Z的位置");
  gui.add(lightParam, "decay", 0, 1).name("衰减");

  textureParam = new textureObj();
  gui.add(textureParam, "repeat", 1, 5).name("纹理重复");
  gui.add(textureParam, "wrap", 1, 3).name("纹理环绕").step(1);
  gui.add(textureParam, "offsetX", -1.0, 1.0).name("纹理X偏移").step(0.1);
  gui.add(textureParam, "offsetY", -1.0, 1.0).name("纹理Y偏移").step(0.1);
}

function change() {
  if (texture != null) {
    texture.offset.x = textureParam.offsetX;
    texture.offset.y = textureParam.offsetY;
    texture.repeat.x = texture.repeat.y = textureParam.repeat;
    if (textureParam.wrap == 1) {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    } else if (textureParam.wrap == 2) {
      texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
    } else if (textureParam.wrap == 3) {
      texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
    }
    texture.needsUpdate = true;
  }

  light.position.set(lightParam.x, lightParam.y, lightParam.z);
  light.decay = lightParam.decay;

  camera.position.x = cameraParam.x;
  camera.position.y = cameraParam.y;
  camera.position.z = cameraParam.z;
  camera.updateProjectionMatrix();
}

function animation() {
  change();
  renderer.clear();
  renderer.render(scene, camera);
  requestAnimationFrame(animation);
}

function threeStart() {
  createUI();
  initTexture();
  initThree();
  initCamera();
  initScene();
  initLight();
  initObject();
  animation();
}
